<template>
    <div
      :class="shadow ? 'tabs-container has-shadow' : 'tabs-container'"
      :style="{ 'align-items': align, display: styleLess }"
    >
      <div class="tabs-title" :style="title ? 'margin-right:10px' : ''">
        <!-- <span style="color: red">{{ required ? '* ' : '' }}</span> -->
        {{ title }}
      </div>
      <div class="item-container">
        <div
          v-for="(item, index) in list"
          :key="index"
          :class="index === actived ? 'tab-item is-actived' : 'tab-item'"
          :style="{ width: width + 'px' }"
          @click="tabClick(item, index, $event)"
        >
          <el-radio-group v-model="radio" class="radio-box">
        <el-radio v-model="item.pageNum" label='1' >{{ item[label] }}
        </el-radio> 
      </el-radio-group>
      <!-- <input type="radio">
        {{ item[label] }} -->
        </div>
        <div class="wu" v-show="list.length == 0">暂无数据</div>
      </div>
    </div>
  </template>
  <script>
  export default {
    name: 'XTabs2',
    props: {
      title: {
        type: String,
        default: ''
      },
      list: {
        type: Array,
        default() {
          return []
        },
        required: true
      },
      label: {
        type: String,
        required: true
      },
      activedIndex: {
        type: String,
        default: ''
      },
      shadow: {
        type: Boolean,
        default: true
      },
      required: {
        type: Boolean,
        default: false
      },
      souying: {
        type: Boolean,
        default: false
      },
      width: {
        type: Number
      },
      styleLess: {
        type: String,
        default: 'flex'
      },
      align: {
        type: String
      }
    },
    data() {
      return {
        randio:"",
        actived: this.activedIndex //this.activedIndex
      }
    },
    methods: {
      tabClick(item, index, $event = '') {
        // console.log(item, index, $event)
        console.log($event)
        this.actived = index
        this.$emit('tab-click', { item, index, $event })
      },
      qingkong() {
        this.actived = ''
      },
      ling() {
        this.actived = 0
      }
    },
    watch: {
      list: {
        handler(newVal) {
          this.tabClick(newVal[0], 0)
        }
      },
      style: {
        handler(newVal) {
          console.log(newVal)
        }
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .tabs-container {
    display: flex;
  
    height: 100%;
    min-height: 30px;
    width: 100%;
    background-color: #ffffff;
    height: 65%;
  
    // tabs标题
    .tabs-title {
      // width: 100px;
      width: fit-content;
      height: 32px;
      line-height: 32px;
      display: inline-block;
      margin: 10px 0px;
      color: #606266;
      white-space: nowrap;
      font-weight: bold;
    }
  
    // tab项
    .item-container {
      .tab-item {
        text-align: center;
        display: inline-block;
        height: 30px;
        color: #606266;
        // background-color: #ffffff;
        font-size: 14px;
        line-height: 30px;
        border-radius: 8px;
        // border: 1px solid #d8d8da !important;
        // margin: 10px 10px 0px 10px;
        // padding: 0px 14px !important;
        // transition: 0.1s linear !important;
        cursor: pointer;
  
        &:last-child {
          margin-bottom: 10px;
        }
      }
  
      .is-actived {
        color: #ffffff;
        // background-color: #44b1f4;
        // border: 2px solid #ffffff !important;
      }
    }
  }
  
  .has-shadow {
    min-height: 50px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
  }
  
  .wu {
    height: 30px;
    line-height: 30px;
    margin: 10px 10px 10px 20px;
    color: #606266;
  }
  
  </style>
  